<template>
	<my-template>
		<view slot="header">
			<image src="../../../static/png1.jpg" class="image1" />	
		</view>
		<view slot="content">
			<view class="view3">
				<h1 class="h11">login</h1>
				<hr class="hr2">
			</view>
		
			<view class="form1">
				<form @submit="handleSub" @reset="handleReset">
					<label class="label1">
						Name
					</label>
					<input  class="input1" v-model="loginInfo.name" type="text" />
					<label class="label1">
						Password
					</label>
					<input class="input1" v-model="loginInfo.password" type="password" />
					<my-a url="#">forget your password?</my-a>
					<view class="view2">
						<button form-type="submit" type="primary" class="button1">submit</button>
						<button form-type="reset" type="warn" class="button1">reset</button>
					</view>
				</form>	
			</view>
			
		</view>
		
	</my-template>

</template>

<script>
	import myA from '../components/my-a.vue'
	import myTemplate from '../components/my-template.vue'
	export default {
		components:{
			myTemplate,myA
		},
		data() {
			return {
				loginInfo: {
					name: 'fbz',
					password: '123456',
				}
			}
		},
		onLoad() {},
		computed: {
			loginState() {
				return this.$store.getters.getLoginState
			},
			loginUserInfo() {
				return this.$store.getters.getLoginUserInfo
			}
		},
		methods: {
			handleReset() {
				this.loginInfo.name = ''
				this.loginInfo.password = ''
			},
			handleSub() {
				let _this = this
				// console.log('use it')
				uni.request({
					url: '/app/api/v2/login',
					method: 'POST',
					data: this.loginInfo,

					success(res) {
						// console.log(res.data)
						// console.log(res.data.loginResult)
						let result = res.data
						if (result.loginResult == 'LOGIN_SUCCESS') {
							console.log('login successfully')
							_this.$store.commit('setLoginState', true)
							_this.$store.commit('setLoginUserInfo', result)
							uni.switchTab({
								url:'index/index'
							})
						}
					}
				})
			}
		},
	}
</script>
<style scoped>
	.label1{
		margin-left: 15px;
		font-size: 20px;
		/* text-align: left; */
	}
	.card1{
		padding: 10px;
	}

	.input1{
		background-color: #F1F1F1;
		padding: 0 1px 0 20px;
		font-size: 30px;
	}
	.input1:hover{
		border: #007AFF 1px solid;
	}
	.form1{
		padding: 10px 20px 10px 20px;
		/* width: 100%; */
	}
	.button1{
		margin-top: 30px;
		margin-left: 12px;
		display: inline-block;
		min-width: 100px;
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.view2{
		width: 100%;
	}
	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

</style>
